<template>
    <div>
        <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><i class="el-icon-menu"></i> 实验室管理系统</el-breadcrumb-item>
                    <el-breadcrumb-item>设备信息</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        <el-tabs type="border-card">
                <el-tab-pane label="所有设备">
                    <el-table :data="tableData"  border style="width: 100%;margin: 20px">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column type="index" width="60"></el-table-column>
                        <el-table-column prop="equipmentId" label="设备编号"></el-table-column>
                        <el-table-column prop="equipmentName" label="设备名称" ></el-table-column>
                        <el-table-column prop="equipmentBrand" label="设备品牌"></el-table-column>
                        <el-table-column prop="equipmentModel" label="设备型号"></el-table-column>
                        <el-table-column prop="parameterInformation" label="参数信息"></el-table-column>
                        <el-table-column prop="supplier" label="供应商"></el-table-column>
                        <el-table-column prop="price" label="设备价格"></el-table-column>
                        <el-table-column prop="doorNumber" label="所在实验室"></el-table-column>
                        <el-table-column prop="equipmentStatus" label="设备状态"></el-table-column>
                    </el-table>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="pageNum"
                        :page-size="15"
                        layout="prev, pager, next, jumper"
                        :total="count">
                    </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="正常">
                    <el-table :data="tableData1"  border style="width: 100%;margin: 20px">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column type="index" width="60"></el-table-column>
                        <el-table-column prop="equipmentId" label="设备编号"></el-table-column>
                        <el-table-column prop="equipmentName" label="设备名称" ></el-table-column>
                        <el-table-column prop="equipmentBrand" label="设备品牌"></el-table-column>
                        <el-table-column prop="equipmentModel" label="设备型号"></el-table-column>
                        <el-table-column prop="parameterInformation" label="参数信息"></el-table-column>
                        <el-table-column prop="supplier" label="供应商"></el-table-column>
                        <el-table-column prop="price" label="设备价格"></el-table-column>
                        <el-table-column prop="doorNumber" label="所在实验室"></el-table-column>
                        <el-table-column prop="equipmentStatus" label="设备状态"></el-table-column>
                    </el-table>
                    <el-pagination
                        @size-change="handleSizeChange1"
                        @current-change="handleCurrentChange1"
                        :current-page.sync="pageNum1"
                        :page-size="15"
                        layout="prev, pager, next, jumper"
                        :total="count1">
                    </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="故障">
                    <el-table :data="tableData2"  border style="width: 100%;margin: 20px">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column type="index" width="60"></el-table-column>
                        <el-table-column prop="equipmentId" label="设备编号"></el-table-column>
                        <el-table-column prop="equipmentName" label="设备名称" ></el-table-column>
                        <el-table-column prop="equipmentBrand" label="设备品牌"></el-table-column>
                        <el-table-column prop="equipmentModel" label="设备型号"></el-table-column>
                        <el-table-column prop="parameterInformation" label="参数信息"></el-table-column>
                        <el-table-column prop="supplier" label="供应商"></el-table-column>
                        <el-table-column prop="price" label="设备价格"></el-table-column>
                        <el-table-column prop="doorNumber" label="所在实验室"></el-table-column>
                        <el-table-column prop="equipmentStatus" label="设备状态"></el-table-column>
                    </el-table>
                    <el-pagination
                        @size-change="handleSizeChange2"
                        @current-change="handleCurrentChange2"
                        :current-page.sync="pageNum2"
                        :page-size="15"
                        layout="prev, pager, next, jumper"
                        :total="count2">
                    </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="报废">
                    <el-table :data="tableData3"  border style="width: 100%;margin: 20px">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column type="index" width="60"></el-table-column>
                        <el-table-column prop="equipmentId" label="设备编号"></el-table-column>
                        <el-table-column prop="equipmentName" label="设备名称" ></el-table-column>
                        <el-table-column prop="equipmentBrand" label="设备品牌"></el-table-column>
                        <el-table-column prop="equipmentModel" label="设备型号"></el-table-column>
                        <el-table-column prop="parameterInformation" label="参数信息"></el-table-column>
                        <el-table-column prop="supplier" label="供应商"></el-table-column>
                        <el-table-column prop="price" label="设备价格"></el-table-column>
                        <el-table-column prop="doorNumber" label="所在实验室"></el-table-column>
                        <el-table-column prop="equipmentStatus" label="设备状态"></el-table-column>
                    </el-table>
                    <el-pagination
                        @size-change="handleSizeChange3"
                        @current-change="handleCurrentChange3"
                        :current-page.sync="pageNum3"
                        :page-size="15"
                        layout="prev, pager, next, jumper"
                        :total="count3">
                    </el-pagination>
                </el-tab-pane>
            </el-tabs>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                msg:'',
                pageNum:0,
                pageNum1:0,
                pageNum2:0,
                pageNum3:0,
                count:1,
                count1:1,
                count2:1,
                count3:1,
                tableData: [{
                    uuid:'',
                    equipmentId:'',
                    equipmentName:'',
                    equipmentBrand:'',
                    equipmentModel:'',
                    parameterInformation:'',
                    supplier:'',
                    price:'',
                    doorNumber:'',
                    equipmentStatus:''
                }],
                tableData1: [{
                    uuid:'',
                    equipmentId:'',
                    equipmentName:'',
                    equipmentBrand:'',
                    equipmentModel:'',
                    parameterInformation:'',
                    supplier:'',
                    price:'',
                    doorNumber:'',
                    equipmentStatus:''
                }],
                tableData2: [{
                    uuid:'',
                    equipmentId:'',
                    equipmentName:'',
                    equipmentBrand:'',
                    equipmentModel:'',
                    parameterInformation:'',
                    supplier:'',
                    price:'',
                    doorNumber:'',
                    equipmentStatus:''
                }],
                tableData3: [{
                    uuid:'',
                    equipmentId:'',
                    equipmentName:'',
                    equipmentBrand:'',
                    equipmentModel:'',
                    parameterInformation:'',
                    supplier:'',
                    price:'',
                    doorNumber:'',
                    equipmentStatus:''
                }]
            }
        },
        created(){
            this.getData();
            this.getData1();
            this.getData2();
            this.getData3();
        },
        methods:{
            getData(){
                this.page=true;
                this.$axios.get('text/equipment/query?pageNum=1').then((res) => {
                    if(res.data.code==403){
                        this.$router.push('/login');
                    }
                    this.tableData= res.data.data.list;
                    this.count=res.data.data.total;
                })
            },
            getData1(){
                this.page=true;
                this.$axios.get('text/equipment/queryfuzzy?pageNum=1'+'&doorNumber='+ '正常').then((res) => {
                    if(res.data.code==403){
                        this.$router.push('/login');
                    }
                    this.tableData1= res.data.data.list;
                    this.count1=res.data.data.total;

                })
            },
            getData2(){
                this.page=true;
                this.$axios.get('text/equipment/queryfuzzy?pageNum=1'+'&doorNumber='+ '故障').then((res) => {
                    if(res.data.code==403){
                        this.$router.push('/login');
                    }
                    this.tableData2= res.data.data.list;
                    this.count2=res.data.data.total;

                })
            },
            getData3(){
                this.page=true;
                this.$axios.get('text/equipment/queryfuzzy?pageNum=1'+'&doorNumber='+ '报废').then((res) => {
                    if(res.data.code==403){
                        this.$router.push('/login');
                    }
                    this.tableData3= res.data.data.list;
                    this.count3=res.data.data.total;
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(pageNum) {
                this.$axios.get('text/equipment/query?pageNum='+pageNum).then((res) => {
                    this.tableData= res.data.data.list;
                })
            },
            handleSizeChange1(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange1(pageNum1) {
                this.$axios.get('text/equipment/queryfuzzy?pageNum='+pageNum1+'&doorNumber='+ '正常').then((res) => {
                    this.tableData1= res.data.data.list;
                })
            },
            handleSizeChange2(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange2(pageNum2) {
                this.$axios.get('text/equipment/queryfuzzy?pageNum='+pageNum2+'&doorNumber='+ '故障').then((res) => {
                    this.tableData2= res.data.data.list;
                })
            },
            handleSizeChange3(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange3(pageNum3) {
                this.$axios.get('text/equipment/queryfuzzy?pageNum='+pageNum3+'&doorNumber='+ '报废').then((res) => {
                    this.tableData3= res.data.data.list;
                })
            },
        }
    }
</script>

<style scoped>
    .handle-box{
        margin-bottom: 20px;
    }
    .handle-select{
        width: 20px;
    }
    .handle-input{
        width: 300px;
        display: inline-block;
    }
</style>
